<section>
    <header class="m-banner">
        <ul>
            <li><img src="../../assets/images/icons/signal_CONNECTED.png" alt=""></li>
            <li id="welcome">Hi {{getName()}}</li>
            <li id="lesson-info">

                <div *ngIf="getBooked() as b;" class="booked">
                    <div class="lesson-name">
                        {{b.title}} : {{b.booked.lesson.name}}
                    </div>
                    &nbsp;&nbsp;
                    <div id="time">
                        <div class="o-lesson-datetime">
                            <span class="o-lt-date">{{b.booked.beginTime | date:'MM-dd'}}</span> &nbsp;
                            <span class="o-lt-time">{{b.booked.beginTime | date:'HH:mm'}} ~ {{b.booked.endTime | date:'HH:mm'}}</span>
                        </div>
                    </div>
                </div>

                <div id="count-down-box">
                    <div class="o-count-down">
                        <div class='o-cd-item o-cd-num'>{{hh && hh[0]}}</div>
                        <div class='o-cd-item o-cd-num'>{{hh && hh[1]}}</div>
                        <div class='o-cd-item o-cd-colon'>:</div>
                        <div class='o-cd-item o-cd-num'>{{mm && mm[0]}}</div>
                        <div class='o-cd-item o-cd-num'>{{mm && mm[1]}}</div>
                        <div class='o-cd-item o-cd-colon'>:</div>
                        <div class='o-cd-item o-cd-num'>{{ss && ss[0]}}</div>
                        <div class='o-cd-item o-cd-num'>{{ss && ss[1]}}</div>
                    </div>
                </div>

                <div class="icon exit" (click)="exit()" title='Exit'>

                </div>
            </li>

        </ul>
    </header>
</section>
